<template>
  <div class="pending">
    <div>
      <div class="allpay-list">
        <div class="img-box">
          <div class="img-content"
               :style="{'background':'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'}"
          >
            <img src="@/assets/images/ic_pickages.png" alt="">
            <!-- <i class="icon iconfont" v-html="message.icon"></i> -->
          </div>
        </div>
        <div class="pay-content">
          <span style="font-size:.28rem;color:red;">{{ message.car.plate }} - 金额&nbsp;¥&nbsp;{{ message.cost }}元</span>
          <div style="text-align:left;left:0;">{{ message.residential.name }}</div>
          <div style="text-align:left;left:0;">{{ message.starttime_text }}</div>
          <div style="text-align:left;left:0;">至{{ message.endtime_text }}</div>
          <div class="gopay" @click="moneypay" style="font-size:.28rem;text-align:center;color:#ee5a8a;">立即缴费</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '../../../api/api.js'

export default {
  props: {
    message: {
      car: Object
    },
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {
    moneypay() {
      var back_url = encodeURIComponent(encodeURIComponent(window.location.href));
      window.location.href = api.moneypay + '?id=' + this.message.id + '&way=' + this.message.way + '&back_url=' + back_url;
    }
  }
}
</script>

<style scoped>
.allpay-list {
  display: flex;
  height: 2rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}

.img-box {
  flex: 1.5;
}

.img-content {
  position: relative;
  margin: .38rem auto 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #0EAD69;
}

.img-content img {
  position: absolute;
  left: calc(50% - .21rem);
  top: calc(50% - .22rem);
  width: .42rem;
  height: .44rem;
}

.pay-content {
  position: relative;
  flex: 3;
  padding-top: .28rem;
}

.pay-content span {
  display: block;
  line-height: .5rem;
}

.gopay {
  font-weight: bold;
  position: absolute;
  right: .3rem;
  bottom: .4rem;
}

.pay-content .paytext {
  display: flex;
}

.pay-content .paytext span {
  flex: 1;
  line-height: .5rem;
}

.newsbox {
  position: relative;
}

.news {
  display: block;
  position: absolute;
  right: 20%;
  top: 18%;
  width: .15rem;
  height: .15rem;
  text-align: center;
  border-radius: 50%;
  background: #FF001f;
}
</style>

